<template>
	<view>
		<view v-if="agent" :key="agent.bot_id" class="agent-card" :class="{'premium': agent.is_public}">
			<view class="agent-info" @click="selectAgent(agent)">
				<image :src="agent?.icon_url" class="agent-avatar" mode="scaleToFill" />
				<view class="agent-meta">
					<view class="name-wrap">
						<text class="agent-name">{{ agent.bot_name }}</text>
						<view v-if="agent?.is_public" class="premium-tag">
							<uni-icons type="vip" size="14" color="#FFD700"></uni-icons>
						</view>
					</view>
					<text class="agent-desc">{{ agent.description }}</text>
				</view>
			</view>
			<view class="agent-stats">
				<view class="stat-item" @click="copyText( agent?.bot_id)">
					<text style="margin-right: 5rpx;">ID: {{ agent?.bot_id }}</text>
					<uni-icons type="compose" color="#999"></uni-icons>
				</view>
				<text class="stat-item">对话次数: {{ formattedChatsNumber(agent?.chats_number)||'0' }}</text>
			</view>
		</view>
		<view v-else>
			暂无智能体
			
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		agent: Object,
	})
	const emit = defineEmits(['selectAgent'])

	function formattedChatsNumber(number) {
		if (number === undefined || number === null) {
			return '0';
		}
		if (number >= 10000) {
			return `${(number / 10000).toFixed(1)}w`;
		} else if (number >= 1000) {
			return `${(number / 1000).toFixed(1)}k`;
		} else {
			return number.toString();
		}
	}

	function selectAgent(agent) {
		emit('selectAgent', agent)
	}

	function copyText(text) {
		uni.setClipboardData({
			data: text,
			success: (res) => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
			}
		})
	}
</script>

<style scoped>
	.agent-card {
		padding: 30rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.agent-card:active {
		transform: scale(0.98);
	}

	.agent-card.premium {
		background: linear-gradient(45deg, #ffffff, #f0f9f6);
		border: 1px solid rgba(61, 192, 124, 0.1);
		margin-bottom: 20rpx;
	}

	.agent-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.agent-avatar {
		width: 100rpx;
		height: 100rpx;
		object-fit: cover;
		box-sizing: border-box;
		border-radius: 50%;
		margin-right: 24rpx;
		border: 4rpx solid #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.agent-meta {
		flex: 1
	}

	.name-wrap {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 8rpx;
	}

	.agent-name {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}

	.premium-tag {
		background: rgba(255, 215, 0, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.agent-desc {
		font-size: 26rpx;
		color: #666;
		display: block;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.agent-stats {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		font-size: 24rpx;
		color: #999;
	}

	.input-section {
		position: relative;
		margin: 20rpx 0 40rpx;
	}
</style>